<template>
  <!-- 订单列表 -->
  <view class="container">
    <scroll-view
      scroll-x
      class="navbar_box"
      scroll-with-animation
      :scroll-left="scrollLeft"
    >
      <view
        v-for="(item, index) in tabs"
        :key="index"
        class="nav_item"
        :class="{ current: tabCurrentIndex == index }"
        @tap="tabChange(index)"
      >
        <text class="nav_name"
          >{{ item.name }}
          <text v-if="item.num > 0" class="nav_num">{{ item.num }}</text>
        </text>
      </view>
    </scroll-view>
    <view class="navbar_body">
      <swiper
        style="height: 100vh"
        :current="tabCurrentIndex"
        duration="300"
        @change="switchTabView"
      >
        <swiper-item v-for="(w, i) in tabs" :key="i">
          <scroll-view
            scroll-y="true"
            style="height: 100%"
            scroll-with-animation="true"
            @scrolltolower="scrolltolower"
          >
            <view class="navbar_first">
              <view
                class="navbar_first_item"
                v-for="(item, index) in tabs[tabCurrentIndex].list"
                :key="index"
                @tap="goOrderDetail(item.orderId)"
              >
                <view class="first_item_top">
                  <text>{{ item.createTime }}</text>
                  <text
                    class="first_top_r"
                    :class="[item.status == 3 || item.pinkStatus==2 ? 'first_top_r2' : '']"
                    >{{ returnStatus(item) }}</text
                  >
                </view>
                <view
                  class="first_shop"
                  v-for="(item2, index2) in item.orderInfoList"
                  :key="index2"
                >
                  <image
                    :showLoading="true"
                    :src="item2.image"
                    style="width: 160rpx; height: 160rpx; border-radius: 8rpx"
                  >
                  </image>
                  <view class="shop_box">
                    <view class="shop_name">
                      {{ item2.storeName || "" }}
                    </view>
                    <view class="shop_bottom">
                      <view class="describe_l">
                        <text class="huiyuan_price"
                          >￥<text
                            ><text style="font-size: 34rpx">{{
                              dealPrice(item2.price, 1)
                            }}</text
                            >{{ dealPrice(item2.price, 2) }}</text
                          ></text
                        >
                        <text v-if="item2.otPrice > 0" class="price_del"
                          >￥{{ item2.otPrice }}</text
                        >
                      </view>

                      <view class="shop_bottom_r">
                        x{{ item2.cartNum || "" }}
                      </view>
                    </view>
                  </view>
                </view>
                <view
                  v-if="item.paid && item.payPrice"
                  class="first_item_money"
                >
                  <text class="first_money_text">实付金额</text>
                  <text class="first_money_price">¥{{ item.payPrice }}</text>
                  <button
                    v-if="item.pinkId && item.pinkStatus==1 &&item.pinkId > 0"
                    class="btn1"
                    @tap.stop="goPink(item.pinkId)"
                  >
                    邀请好友拼团
                  </button>
                </view>
                <view
                  v-if="item.status == 0 && !item.paid"
                  class="first_item_bottom2"
                >
                  <view style="margin-right: 16rpx">
                    <button class="btn1" @tap.stop="goCancel(item)">
                      取消订单
                    </button>
                  </view>
                  <view>
                    <button
                      class="btn1"
                      @tap.stop="goPayShow(item.payPrice, item.orderId)"
                    >
                      去支付
                    </button>
                  </view>
                </view>
                <view v-if="item.status == 1" class="first_item_bottom2">
                  <view style="margin-right: 16rpx">
                    <button class="btn1" @tap.stop="goPhysical(item)">
                      查看物流
                    </button>
                  </view>
                  <view>
                    <button class="btn1" @tap.stop="goQueryGood(item.id)">
                      确认收货
                    </button>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <payment
      :payMode="payMode"
      :pay_close="pay_close"
      @onChangeFun="onChangeFun"
      :order_id="pay_order_id"
      :totalPrice="totalPrice"
    ></payment>
  </view>
</template>

<script>
import {
  getOrderNumData,
  getOrderListData,
  queryOrderData,
  postOrderCancelData,
} from "../../api/api.js";
import payment from "@/components/payment";
import { dealPrice } from "@/utils/index.js";
export default {
  data() {
    return {
      tabs: [
        {
          type: 9,
          name: "全部",
          total: 0,
          list: [],
          page: 1,
          num: 0,
          isNoMore: "nomore",
        },
        {
          type: 0,
          name: "待付款",
          total: 0,
          list: [],
          page: 1,
          num: 0,
          isNoMore: "nomore",
        },
        {
          type: 8,
          name: "待核销",
          total: 0,
          list: [],
          page: 1,
          num: 0,
          isNoMore: "nomore",
        },
        {
          type: 1,
          name: "待发货",
          total: 0,
          list: [],
          page: 1,
          num: 0,
          isNoMore: "nomore",
        },
        {
          type: 2,
          name: "待收货",
          total: 0,
          list: [],
          page: 1,
          num: 0,
          isNoMore: "nomore",
        },
      ],
      tabCurrentIndex: 0,
      contentScrollW: 0, //tab总宽
      scrollLeft: 0, // 横向滚动条位置

      orderItem: "",
      ispayShow: false, //支付显示
      payMode: [
        {
          name: "微信支付",
          icon: "icon-weixinzhifu",
          value: "weixin",
          title: "微信快捷支付",
        },
        {
          name: "余额支付",
          icon: "icon-yuezhifu",
          value: "yue",
          title: "可用余额:",
          number: 0,
        },
      ],
      pay_close: false,
      pay_order_id: "",
      totalPrice: "0",
      userInfo: "",
      limit: 100,
      from: "",
      editItem: "",
    };
  },
  components: {
    payment,
  },
  onLoad(options) {
    this.getScrollW(); //获取tab距离
    if (options.index) {
      this.tabCurrentIndex = JSON.parse(decodeURIComponent(options.index));
    }
  },
  onShow() {
    this.getOrderList(this.tabCurrentIndex, 1); //获取订单列表
  },
  methods: {
    /**
     * 事件回调
     *
     */
    onChangeFun: function (e) {
      let opt = e;
      let action = opt.action || null;
      let value = opt.value != undefined ? opt.value : null;
      action && this[action] && this[action](value);
    },
    pay_complete: function () {
      this.$set(this, "pay_close", false);
      this.getOrderList(this.tabCurrentIndex, 1);
    },
    // 去参团页面；
    goPink(id) {
      uni.navigateTo({
        url: "/subpageC/combination_status/combination_status?id=" + id,
      });
    },
    /**
     * 支付失败回调
     *
     */
    pay_fail: function () {
      this.pay_close = false;
    },
    /**
     * 关闭支付组件
     *
     */
    payClose: function () {
      this.pay_close = false;
    },
    getUserInfo() {
      getUserInfo()
        .then((res) => {
          Cache.setItem({
            name: "USER_INFO",
            value: res,
          });
          this.userInfo = res;
          this.payMode[1].number = this.userInfo.nowMoney;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goCancel(item) {
      let that = this;
      uni.showModal({
        content: "确定要取消订单吗？",
        confirmColor: "#FF774D",
        success: function (res) {
          if (res.confirm) {
            that.truecancel(item);
          }
        },
      });
    },
    truecancel(item) {
      uni.showLoading({});
      postOrderCancelData({
        id: item.id,
      }).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: "取消成功",
          icon: "none",
        });
        this.getOrederNum();
        this.getOrderList(this.tabCurrentIndex, 1); //获取订单列表
      });
    },
    returnStatus(item) {
      let status = item.status;
      switch (status) {
        case 0:
          if (!item.paid) {
            return "待支付";
          }
          if (item.refundStatus == 1) return "退款申请中";
          if (item.refundStatus == 2) return "已退款";
          if (item.refundStatus == 3) return "退款中";
		  if (item.pinkId && item.pinkId > 0){
			if (item.pinkStatus == 1) {
				return '拼团进行中'
			}
			if (item.pinkStatus == 2) {
				return '拼团已完成，待发货'
			}
			if (item.pinkStatus == 3) {
				return '拼团已取消'
			}
		  }
          if (item.shippingType == 1) {
            return "待发货";
          }
          if (item.shippingType == 2) {
            return "待核销";
          }
        case 1:
          if (item.shippingType == 1) {
            return "待收货";
          }
          if (item.shippingType == 2) {
            return "待核销";
          }
        case 2:
        case 3:
          return "已完成";
        case 4:
          return "已关闭";
      }
    },
    // 处理价格
    dealPrice(v, n) {
      return dealPrice(v, n);
    },
    // 上拉加载
    scrolltolower() {
      // let _this = this;
      // if (((_this.tabs[_this.tabCurrentIndex].page + 1) * _this.limit) < _this.tabs[_this.tabCurrentIndex]
      // 	.total) {
      // 	_this.tabs[_this.tabCurrentIndex].page = _this.tabs[_this.tabCurrentIndex].page + 1;
      // 	_this.tabs[_this.tabCurrentIndex].isNoMore = 'loading';
      // 	_this.getOrderList();
      // } else {
      // 	_this.isNoMore = 'nomore';
      // }
    },
    //获取tab距离
    getScrollW() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".navbar_box")
        .boundingClientRect((data) => {
          this.contentScrollW = data.width;
        })
        .exec();
      query
        .selectAll(".nav_item")
        .boundingClientRect((data) => {
          let dataLen = data.length;
          for (let i = 0; i < dataLen; i++) {
            this.tabs[i].left = data[i].left;
            this.tabs[i].width = data[i].width;
          }
        })
        .exec();
    },
    //获取订单数字
    getOrederNum() {
      getOrderNumData()
        .then((res) => {
          // 全部 待付款 待核销 待收货 待评价 已完成
          this.tabs[1].num = res.data.unPaidCount;
          this.tabs[2].num = res.data.unVerificationCount;
          this.tabs[3].num = res.data.unShippedCount;
          this.tabs[4].num = res.data.receivedCount;
          // this.tabs[5].num = res.data.evaluatedCount;
          this.$forceUpdate();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // tab切换
    tabChange(index) {
      this.tabCurrentIndex = index;
      this.scrollLeft =
        this.tabs[index].left -
        this.contentScrollW / 2 +
        this.tabs[index].width / 2;
      this.getOrderList(index, 1);
      this.getOrederNum(); //获取头部数量
    },
    // 获取订单列表
    getOrderList(i, n) {
      if (n == 1) {
        this.tabs[i].page = 0;
        this.tabs[i].total = 0;
        this.tabs[i].list = [];
      }
      let params = {
        type: this.tabs[i].type,
        page: this.tabs[i].page,
        limit: this.limit,
      };
      this.tabs[i].list = [];
      uni.showLoading({});
      getOrderListData(params)
        .then((res) => {
          uni.hideLoading({});
          this.tabs[i].list = this.tabs[i].list.concat(...res.data.list);
          this.getOrederNum();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 去支付
    goPayShow(pay_price, order_id) {
      this.$set(this, "pay_close", true);
      this.$set(this, "pay_order_id", order_id);
      this.$set(this, "totalPrice", pay_price);
    },
    // 订单详情
    goOrderDetail(id) {
      uni.navigateTo({
        url: "/subpageB/order_detail/order_detail?orderId=" + id,
      });
    },
    // 查看物流
    goPhysical(item) {
      // 待写
      wx.openEmbeddedMiniProgram({
        appId: "wx6885acbedba59c14",
        path: `pages/result/result?nu=${item.deliveryId}&com=&querysource=third_xcx`,
        envVersion: "release",
      });
    },
    // 确定收货
    goQueryGood(id) {
      let that = this;
      uni.showModal({
        title: "确认收货",
        content: "为保障权益，请收到货确认无误后，再确认收货",
        success: function (res) {
          if (res.confirm) {
            queryOrderData({
              id,
            })
              .then((res) => {
                that.getOrderList(that.tabCurrentIndex, 1); //获取完成列表
              })
              .catch((err) => {});
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.btn1 {
  color: #525252;
  font-size: 24rpx;
  margin: 0 0 0 10rpx;
}
.container {
  .navbar_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    background-color: #fff;
    z-index: 2;

    .nav_item {
      display: inline-block;
      text-align: center;
      padding: 30rpx 0 22rpx;
      width: 20%;
      font-size: 26rpx;
      color: #525252;

      .nav_name {
        position: relative;

        .nav_num {
          position: absolute;
          top: -20rpx;
          right: -20rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 33rpx;
          height: 33rpx;
          border-radius: 50%;
          background: #ff774d;
          font-size: 18rpx;
          color: #ffffff;
        }
      }
    }

    .current {
      color: #ff774d;
    }
  }

  .navbar_body {
    padding: 116rpx 30rpx 24rpx;

    .navbar_first {
      .navbar_first_item {
        margin-bottom: 24rpx;
        padding: 0 30rpx;
        border-radius: 18rpx;
        background-color: #fff;

        .first_item_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 24rpx 0 2rpx;
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.8);

          .first_top_r {
            font-size: 24rpx;
            color: #f16c09;
          }

          .first_top_r2 {
            color: #000000;
          }
        }

        .first_shop {
          display: flex;
          padding: 34rpx 0;

          .shop_box {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 18rpx;

            .shop_name {
              font-size: 26rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              letter-spacing: 0rpx;
            }

            .shop_bottom {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .describe_l {
                flex: 1;
                display: flex;
                align-items: flex-end;
                font-size: 22rpx;

                .huiyuan {
                  color: #525252;
                }

                .huiyuan_price {
                  letter-spacing: 0rpx;
                  font-size: 24rpx;
                  font-weight: 700;
                  color: #ff443f;
                }

                .price_del {
                  position: relative;
                  letter-spacing: 0rpx;
                  margin-left: 6rpx;
                  font-size: 20rpx;
                  color: #d9d9d9;

                  &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 50%;
                    right: 0;
                    border-top: 1rpx solid #d9d9d9;
                    transform: rotate(10deg);
                  }
                }
              }

              .shop_bottom_r {
                display: flex;
                align-items: center;
                font-size: 26rpx;
                color: #525252;

                .shop_add,
                .shop_minus {
                  width: 35rpx;
                  height: 35rpx;
                  border-radius: 50%;
                  border: 2rpx solid #ff774d;
                }

                .shop_add {
                  position: relative;

                  &::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 19rpx;
                    height: 2rpx;
                    transform: translate(-50%, -50%);
                    background-color: #ff774d;
                  }
                }

                .shop_minus {
                  position: relative;

                  &::before {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 20rpx;
                    transform: translate(-50%, -50%);
                    border-top: 2rpx solid #ff774d;
                  }

                  &::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    height: 20rpx;
                    transform: translate(-50%, -50%);
                    border-left: 2rpx solid #ff774d;
                  }
                }
              }
            }
          }
        }

        .first_item_money {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding: 12rpx 0;

          .first_money_text {
            margin-right: 20rpx;
            font-size: 26rpx;
          }

          .first_money_price {
            font-size: 30rpx;
            font-weight: 600;
            color: #ff443f;
          }
        }

        .first_item_bottom1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 30rpx 0;

          .first_bottom1_l {
            position: relative;
            color: #c4c4c4;

            .first_bottom1_cancel {
              position: absolute;
              bottom: -85rpx;
              left: -22rpx;
              width: 176rpx;
              text-align: center;
              padding: 20rpx 0rpx;
              background-color: #fff;
              border-radius: 8rpx;
              box-shadow: 0rpx 0rpx 12rpx #c3c3c3;
              font-size: 24rpx;
              z-index: 3;

              &::after {
                content: "";
                position: absolute;
                left: 25rpx;
                top: -10rpx;
                width: 18rpx;
                height: 18rpx;
                background-color: #fff;
                box-shadow: -5rpx -5rpx 10rpx -4rpx #c3c3c3;
                transform: rotate(45deg);
                z-index: 2;
              }
            }
          }
        }

        .first_item_bottom2 {
          display: flex;
          justify-content: flex-end;
          padding: 30rpx 0;
        }
      }
    }
  }

  .pop_top {
    display: flex;
    justify-content: space-between;
    padding: 26rpx 30rpx 34rpx;
    font-size: 30rpx;
    font-weight: 600;
  }

  .pop_body {
    padding: 0 30rpx;

    .pop_item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      border-top: 2rpx solid #ccc;

      .pop_img {
        width: 68rpx;
        height: 68rpx;
      }

      .pop_right {
        margin-left: 20rpx;

        .pop_item_name {
          font-size: 32rpx;
          color: #282828;
        }

        .pop_item_tip {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}
</style>
